<template>
    <el-dialog v-model="show" title="付款审批" width="30%" align-center @close="handleClose">

        <el-row>
            <el-col class="flex" :span="12">
                <div class="label">
                    申请人：
                </div>
                <div>{{ props.initList.createByName }}</div>
            </el-col>
            <el-col class="flex" :span="12">
                <div class="label">
                    申请日期：
                </div>
                <div>{{ props.initList.createTime }}</div>
            </el-col>
            <el-col class="flex" :span="12">
                <div class="label">
                    申请金额：
                </div>
                <div>{{ props.initList.applyAmount }}</div>
            </el-col>
            <el-col class="flex" :span="12">
                <div class="label">
                    收款方：
                </div>
                <div>{{ props.initList.collectName }}</div>
            </el-col>
            <el-col class="flex" :span="12">
                <div class="label">
                    所属公司：
                </div>
                <div>{{ props.subsidiariesList.filter((item: any) => item.id ==
                    props.initList.companyId)[0].companyName }}</div>
            </el-col>
            <el-col class="flex" :span="12">
                <div class="label">
                    摘要：
                </div>
                <div>{{ props.summaryList.filter((item: any) => item.value == props.initList.summary)[0].label }}</div>
            </el-col>
            <el-col class="flex" :span="24">
                <div class="label">
                    申请原因：
                </div>
                <div>{{ props.initList.applyReason }}</div>
            </el-col>
        </el-row>

        <!-- <div class="flex mt2">
            <div class="label">
                查看凭证：
            </div>
            <div class="flex mtr">
                <el-image style="width: 100px; height: 100px" :src="url" fit="fill" />
            </div>
        </div> -->

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleRefuse">拒 绝</el-button>
                <el-button type="primary" @click="handleSubmit">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { auditMiscellaneousExpensesApi } from '@/api/sj/financialManagement/miscellaneousExpenses'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'summaryList', 'subsidiariesList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const form = reactive({
    applyDate: '',
    applyDepartment: '',
});


const handleSubmit = async () => {
    toExamine(1);
};

const handleRefuse = async () => {
    toExamine(2);
};

const toExamine = async (approvalStatus: number) => {
    try {
        const { code } = await auditMiscellaneousExpensesApi({
            id: props.initList.id,
            approvalStatus
        })

        if (code == 200) {
            proxy?.$modal.msgSuccess('操作成功');
            emits('submit', true);

            handleClose();
        }
    } catch (error) {

    }
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.label {
    height: 32px;
    line-height: 32px;
    font-weight: 700;
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    width: 100px;
}

.flex {
    display: flex;
    align-items: center;
}
</style>